<template>
    <view class="content">
        <!--   <view class="upload-section">
            <uv-upload
                :fileList="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                :maxCount="1"
                name="1"
            ></uv-upload>
        </view> -->
        <view class="txtArea">
            <uv-textarea
                v-model="textArea"
                placeholder="请输入关键词,以逗号隔开"
                :height="150"
                :border="'surround'"
                :count="true"
                :maxlength="500"
            ></uv-textarea>
        </view>
        <view class="type-section">
            <uv-radio-group
                v-model="typeValue"
                placement="row"
                @change="handleChangeType"
                :wrap="false"
            >
                <uv-radio
                    v-for="(item, index) in typeOptions"
                    :key="index"
                    :name="item.value"
                    :label="item.text"
                ></uv-radio>
            </uv-radio-group>
        </view>

        <view class="button-section">
            <uv-button
                type="primary"
                text="开始生成"
                @click="startGenerate"
            ></uv-button>
            <uv-button type="info" text="重置" @click="resetForm"></uv-button>
        </view>

        <view class="result-section">
            <uv-loading-icon
                v-if="loading"
                text="文案生成中..."
                mode="circle"
                size="28"
            ></uv-loading-icon>
            <uv-text v-if="resultText" :text="resultText"></uv-text>
        </view>
    </view>
</template>

<script>
import request from "@/utils/request";
export default {
    data() {
        return {
            fileList: [],
            typeValue: 0,
            typeTitle: "选择文案类型",
            typeText: "公众号文案",
            textArea: "",
            typeOptions: [
                { text: "公众号", value: 0 },
                { text: "小红书种草", value: 1 },
                { text: "商品描述", value: 2 },
            ],
            resultText: "",
            loading: false,
        };
    },
    methods: {
        afterRead(event) {
            // 将上传的图片转换成url格式
            console.log(event);

            this.fileList.push(event.file);
        },
        deletePic(event) {
            this.fileList.splice(event.index, 1);
        },
        // 选项切换
        handleChangeType(event) {
            console.log(event);

            this.typeValue = event;
            this.typeText = this.typeOptions.find(
                (item) => item.value === this.typeValue
            ).text;
            console.log(
                "当前选中的值：",
                this.typeValue,
                this.typeText,
                this.fileList
            );
        },
        startGenerate() {
            // 1. 判断用户是否上传图片或输入关键词
            if (!this.textArea) {
                uni.showToast({
                    title: "请输入关键词",
                    icon: "none",
                });
                return;
            }

            // 2. 配置prompt提示词
            let prompt = `请根据以下内容生成500字${this.typeText}文案：\n`;

            // 添加关键词内容
            if (this.textArea) {
                prompt += `关键词：${this.textArea}\n`;
            }

            // 添加图片信息
            // if (this.fileList.length > 0) {
            //     prompt += `${this.fileList[0].url}\n`;
            // }

            // 3. 设置加载状态
            this.loading = true;

            // 4. 接口调用
            request({
                url: "/deepseekapi",
                method: "POST",
                data: {
                    content: prompt,
                },
            })
                .then((res) => {
                    console.log("生成成功:", res);
                    this.loading = false;
                    this.resultText =
                        res.answer_content || "文案生成失败,请稍后重试...";
                })
                .catch((err) => {
                    console.error("生成失败:", err);
                    this.loading = false;
                });
        },
        resetForm() {
            this.fileList = [];
            this.typeValue = 0;
            this.resultText = "";
        },
    },
};
</script>

<style>
.content {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    background-color: #f8f8f8;
    min-height: 100vh;
}

.txtArea {
    background-color: #ffffff;
    padding: 24rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.upload-section,
.type-section,
.button-section,
.result-section {
    width: 100%;
    position: relative;
    z-index: 10;
}

.type-section {
    background-color: #ffffff;
    padding: 24rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.type-section :deep(.uv-radio-group) {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
}

.button-section {
    display: flex;
    gap: 30rpx;
    justify-content: center;
    margin: 30rpx 0;
}

.result-section {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    min-height: 200rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    line-height: 1.6;
}
</style>
